<template>
  <div
    class="register-page main-container"
    :style="'background-image:url(' + Background + ')'"
  >
    <div class="header">
      <div class="wrapper">
        <div class="logo">
          <h1><router-link to="/home" class="logo"> 手慧智言 </router-link></h1>
          <h2>欢迎注册</h2>
          <span
            >已有帐号，<router-link to="/login" class="login"
              >请登录 &gt;</router-link
            ></span
          >
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="regester">
        <h1 class="regester-title">注册用户</h1>
        <form
          ref="regForm"
          :model="regForm"
          :rules="loginRules"
          class="regester-form"
          autocomplete="off"
        >
          <div class="uname-box" id="uname-box" data-id="1">
            <input
              ref="account"
              v-model="regForm.account"
              type="text"
              auto-complete="off"
              prefix-icon="el-icon-user"
              id="uname"
              placeholder="请输入用账号：4-32位字符"
            />
          </div>
          <div class="phone-box" id="phone-box" data-id="2">
            <input
              ref="realname"
              v-model="regForm.realname"
              type="text"
              auto-complete="off"
              placeholder="请输入用户名/昵称"
              prefix-icon="el-icon-user"
              id="phone"
            />
          </div>
          <!-- <div class="code-box" id="code-box" data-id="3">
            <input
              ref="code"
              v-model="regForm.code"
              type="text"
              id="number"
              placeholder="请输入验证码"
            />
            <span class="code-btn"
              ><a href="#" @click="sendCode">获取验证码</a></span
            >
          </div> -->
          <div class="pwd-box" id="pwd-box" data-id="4">
            <input
              v-model="regForm.password"
              type="password"
              show-password
              auto-complete="off"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              ref="password"
              id="password"
            />
          </div>
          <div class="confirm-box" id="confirm-box" data-id="5">
            <input
              v-model="regForm.repass"
              type="password"
              show-password
              auto-complete="off"
              placeholder="请再次输入密码"
              prefix-icon="el-icon-lock"
              ref="repass"
              id="confirm_password"
            />
          </div>
          <div class="permit">
            <input
              type="checkbox"
              ref="permit"
              v-model="regForm.permit"
              class="permit-checkbox"
              checked
            /><span
              >已阅读并同意<a href="#" class="permit-link"
                >《用户服务协议》</a
              ></span
            >
          </div>
          <button
            type="submit"
            class="rgs"
            :loading="loading"
            @click="userRegister"
          >
            下一步
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import Background from "../assets/img/login-background.jpg";

import { mapState } from "vuex";
export default {
  name: "Register",
  data() {
    return {
      Background,
      placeholder: "请输入账号：4-32个字符",
      regForm: {
        account: "",
        realname: "",
        password: "",
        repass: "",
      },
      loginRules: {
        account: [
          {
            min: 4,
            max: 32,
            message: "长度在 4 到 32 个字符",
            trigger: "blur",
          },
        ],
        realname: [
          { required: true, message: "请输入用户名/昵称", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "长度在 2 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      redirect: undefined,
    };
  },
  computed: {
    ...mapState({
      globalConfig: (state) => state.globalConfig,
    }),
  },

  mounted() {
    let regauth = this.globalConfig.sysInfo.regauth ?? 0;
    let msg = "请输入账号：4-32个字符";
    switch (parseInt(regauth)) {
      case 1:
        msg = "请输入正确的手机号";
        break;
      case 2:
        msg = "请输入正确的邮箱";
        break;
      case 3:
        msg = "请输入正确的手机号或者邮箱";
        break;
      default:
        msg = "请输入正确的账号";
    }
    let req = { required: true, message: msg, trigger: "blur" };
    this.loginRules.account.push(req);
  },
  methods: {
    userRegister() {
      // console.log(/^[a-zA-Z0-9_-]{6,10}$/.test(this.$refs.account.value));
      if (/^[a-zA-Z0-9_-]{6,10}$/.test(this.$refs.account.value)) {
        this.$message.error(" 账号只能包含字母、数字、下划线、减号");
      }
      if (/^1[3-9]\d{9}$/.test(this.$refs.realname.value)) {
        this.$message.error("用户名只能包含字母、数字、下划线、减号");
      }
      if (/^[a-zA-Z0-9.@#]{6,16}$/.test(this.$refs.password.value)) {
        this.$message.error("密码只能包含字母、数字、点、@、#");
      }
      if (this.$refs.password.value !== this.$refs.repass.value) {
        this.$message.error("两次密码输入不一致");
      }
      if (this.regForm.account === "") {
        this.$message.error("请输入账号");
      }
      if (this.regForm.realname === "") {
        this.$message.error("请输入用户名");
      }
      if (this.regForm.password === "") {
        this.$message.error("请输入密码");
      }
      if (this.regForm.repass === "") {
        this.$message.error("请确认密码");
      }
      if (this.regForm.password !== this.regForm.repass) {
        alert("两次密码输入不一致");
      }
      if (!this.regForm.permit) {
        this.$message.error("请阅读并同意用户协议");
      }
      if (
        this.regForm.account !== "" &&
        this.regForm.realname !== "" &&
        this.regForm.password !== "" &&
        this.regForm.repass !== "" &&
        this.regForm.permit
      ) {
        this.$router.push("/login");
        // this.$router.push("/login");
      }
    },
  },
};
</script>

<style scoped>
.register-page {
  background-image: url(../assets/login-background.jpg);
}
a {
  text-decoration: none;
}
.main-container {
  width: 100%;
  height: 100vh;
  background-size: cover;
}
.wrapper {
  overflow: hidden;
  margin: 0 auto;
  width: 1440px;
  height: 800px;
  /* background-color: white; */
}
.regester {
  overflow: hidden;
  margin: 0 auto;
  margin-top: 200px;
  /* padding-top: 50px; */
  width: 700px;
  height: 500px;
  background-color: white;
  /*透明背景 rgba(220,38,38,0.2) */
  opacity: 0.8;
}
.regester-title {
  font-weight: 100%;
  text-align: center;
  vertical-align: middle;
  margin-top: 20px;
  margin-bottom: 30px;
}
.regester-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
input[id] {
  width: 300px;
  height: 40px;
  padding: 0 10px;
  /* padding-left: 10px; */
  border: none;
  outline: none;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: rgba(0, 0, 0, 0);
}
input[id]::placeholder {
  position: relative;
  left: 10px;
}
.code {
  display: flex;
  position: relative;
}
.code-btn {
  position: absolute;
  top: 9px;
  left: 205px;
}
.rgs {
  margin-top: 10px;
  width: 300px;
  height: 40px;
  background-color: #27ba9b;
}
.permit-checkbox {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  margin-right: 5px;
  border-radius: 50%;
}
.permit-checkbox:checked {
  /* border-radius: 3px; */
  background-color: #27ba9b;
}
.permit-link {
  color: #007b06;
}
.code-btn a {
  color: #27ba9b;
}
/* .error {
        display: none;
        margin-right: 175px;
        color: red;
        font-size: 12px;
      } */
div [data-id] {
  position: relative;
  margin-bottom: 15px;
}
.header {
  position: fixed;
  top: -15px;
  left: 0px;
  height: 105px;
  width: 100%;
  /* background-color: #fff; */
}
.header .wrapper {
  display: flex;
  /* margin: 0 auto; */
  /* width: 1340px; */
  margin-top: 10px;
}
.header .wrapper .logo .logo {
  display: block;
  width: 400px;
  height: 100px;
  background-image: url(../assets/font.png);
  /* background-color: rgba(220, 38, 38, 0.2); */
  font-size: 0px;
}
.header .logo {
  display: flex;
}
.header .logo h2 {
  font-size: 40px;
  font-weight: normal;
  margin-top: 30px;
}
.header .logo span {
  color: #ccc;
  margin-top: 50px;
  margin-left: 700px;
}
span .login {
  color: red;
  margin-top: 200px;
  text-decoration: underline;
  text-decoration-color: red;
  font-size: 20px;
}
</style>
